<template>
	<view class="content">
		<!-- 密码 -->
		<view class="inputWrapper">
			<input class="input" type="password" placeholder="请输入新密码" @input="input_password" />
			<view class="warn">{{pswdWarn}}</view>
		</view>
		<!-- 密码确认 -->
		<view class="inputWrapper">
			<input class="input" type="password" placeholder="请再次输入新密码" @input="ensure_password" />
			<view class="warn">{{pswdWarn2}}</view>
		</view>
		<!-- 按钮 -->
		<view class="loginBtn" @click="change">
			<text class="btnText">确认</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pswdWarn: '',
				pswdWarn2: '',
				pswdCheck2: false,
				pswdCheck: false,
				pswd: '',
				name: '', //账户名
			}
		},
		methods: {
			input_password(value) {
				this.pswdCheck = false;
				if (value.detail.value == "") {
					this.pswdWarn = '密码不能为空'
				} else {

					if (value.detail.value.length >= 3 &&
						value.detail.value.length <= 10) {
						//包含数字
						let Num = /^(?=.*\d).{1,10}$/
						let num = Num.test(value.detail.value) ? 1 : 0;
						//包含大小字符
						let A = /^(?=.*[a-zA-Z]).{1,10}$/;
						let a = A.test(value.detail.value) ? 1 : 0;
						//包含特殊字符
						let Special = /^(?=.*[^\da-zA-Z\s]).{1,10}$/
						let special = Special.test(value.detail.value) ? 1 : 0;

						console.log(special + a + num);
						//是否满足其中两个
						if (num + a + special >= 2) {
							this.pswd = value.detail.value;
							this.pswdWarn = "";
							this.pswdCheck = true;
						} else {
							//弹出提示
							this.pswdWarn = '密码必须由大小写、特殊字符、数字两种以上组合';
						}
					} else if (value.detail.value.length < 3) {
						this.pswdWarn = '密码过短,应为3-10位';
					} else {
						this.pswdWarn = '密码过长,应为3-10位';
					}
				}

			},
			ensure_password(value) {
				this.pswdCheck2 = false;
				if (this.pswd == value.detail.value && value.detail.value != "") {
					this.pswdCheck2 = true;
					this.pswdWarn2 = "";
				} else {
					this.pswdWarn2 = "两次密码填写不一致"
				}
			},
			change() {
				if( this.pswdCheck && this.pswdCheck2 ){
					//密码合格
					uni.request({
						url:'http://192.168.5.3:9091/api/pswdChange',
						method: 'POST',
						data: {
							newpassword: this.pswd,
							name: this.name,
						},
						success() {
							console.log("新密码修改成功");
							uni.clearStorage();
							uni.reLaunch({
								url: '/pages/login/login',
							});
						}
					});
				}else{
					uni.showToast({
						title: "密码格式错误",
						icon: 'error',
					});
				}
			}
		},
		onLoad() {
			uni.getStorage({
				key: 'name',
				success:(res) => {
					this.name = res.data;
				}
			})
		}
	}
</script>

<style>
	.content {
		width: 80vw;
		height: 90vh;
		margin: auto;
		background-color: #f7f8fa;
	}
	
	.avatorWrapper {
		height: 30vh;
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: center;
	
	}
	
	.avator {
		width: 300rpx;
		height: 300rpx;
		padding: 10rpx;
		background-color: #2b85e4;
		overflow: hidden;
	
	}
	
	.avator .img {
		width: 100%
	}
	
	.form {
		padding: 0 100upx;
	
	}
	
	.inputWrapper {
		width: 100%;
		height: 80upx;
		background: white;
		border-radius: 20px;
		box-sizing: border-box;
		padding: 0 20px;
		margin-top: 25px;
		background-color: #c8c9cc;
	
	}
	
	.inputWrapper .input {
		width: 100%;
		height: 100%;
		text-align: center;
		font-size: 15px;
	
	}
	
	.loginBtn {
		width: 100%;
		height: 80upx;
		background: #2979ff;
		border-radius: 50upx;
		margin-top: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
	
	}
	
	.bottomBTN {
	
		width: 100%;
	
	}
	
	.loginBtn .btnText {
		color: white;
	
	}
	
	.forgotBtn {
		float: left;
		text-align: center;
		color: #2b85e4;
		font-size: 15px;
		margin: 10px;
	
	}
	
	.warn {
		color: #fa3534;
		font-size: 15rpx;
		float: inherit;
		margin: 0px;
	}
</style>